<!-- 134 -->
<template>
  <div  class="page-wrap">
    <a-space class="common-button-group">
      <a-button
      class="t9-form-wideget-btn-default"
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      group="ManageChangePlan"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
    >
            <a-form-item :label="$t('T9_shopId')" name="shopId">
        <a-select
          v-model:value="queryForm.shopId"
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
       <a-form-item :label="$t('T9_reservedEqId')" name="reservedEqId">
        <a-select
          v-model:value="queryForm.reservedEqId"
          allow-clear
          show-search
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.reservedEqIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.value }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_planState')" name="planState">
        <a-select
          v-model:value="queryForm.planState"
          allow-clear
          show-search
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.planStateList"
            :key="item.value"
            :value="item.value"
            >{{ item.value }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_sourceCst')" name="sourceCst">
        <a-input v-model:value="queryForm.sourceCst" allow-clear :placeholder="$t('common_pleaseEnter1')" />
      </a-form-item>
      <a-form-item :label="$t('T9_targetCst')" name="targetCst">
        <a-input v-model:value="queryForm.targetCst" allow-clear :placeholder="$t('common_pleaseEnter1')" />
      </a-form-item>
    </t-query-form>
   <div style="display: flex; justify-content: space-between;  margin-bottom: 20px; width: 100%; height:100%">
       <div style="width: 49%; height: 100%" >
      <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_changePlanList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" @click="exportExl" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table"  style="height: 90%">
      <t-table align="center" :loading="searchBtnLoading" :data="list.planDate"  max-height="100%"  @radio-change="handleCheckChange">
      <t-column  type="radio" :title="$t('T9_select')" width="60"></t-column>
      <t-column min-width="100" field="seq" :title="$t('T9_seq')" />
      <t-column min-width="100" field="planId" :title="$t('T9_planId')" />
      <t-column min-width="100" field="planState" :title="$t('T9_planState')" />
      <t-column min-width="100" field="priority" :title="$t('T9_priority')" />
      <t-column min-width="100" field="processState" :title="$t('T9_processState')" />
      <t-column min-width="120" field="reservedEqId'" :title="$t('T9_reservedEqId')" />
      <t-column min-width="120" field="glassHoldState" :title="$t('T9_glassHoldState')" />
      <t-column min-width="100" field="productType" :title="$t('T9_productType')" />
      <t-column min-width="120" field="maxOverQtime" :title="$t('T9_maxOverQtime')" />
      <t-column min-width="120" field="machineState" :title="$t('T9_machineState')" />
      <t-column min-width="120" field="eventComment" :title="$t('T9_eventComment')" />
      <t-column min-width="100" field="createTime" :title="$t('T9_createTime')" />
      <t-column min-width="100" field="stayHour" :title="$t('T9_stayHour')" />
    </t-table>
    </div>
    </div>
   <div style="width: 49%; height: 100%" >
  <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_changeGlassList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button  class="t9-form-wideget-btn-default" type="primary" @click="getExport">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table" style="height: 90%">
    <t-table align="center" :data="list.glassData"  max-height="100%">
      <t-column min-width="100" field="sourceCst" :title="$t('T9_sourceCst')" />
      <t-column min-width="120" field="sourceDspFlag" :title="$t('T9_sourceDspFlag')" />
      <t-column min-width="100" field="srEqId" :title="$t('T9_srEqId')" />
      <t-column min-width="120" field="srTransferState" :title="$t('T9_srTransferState')" />
      <t-column min-width="100" field="targetCst" :title="$t('T9_targetCst')" />
      <t-column min-width="130" field="targetDspFlag" :title="$t('T9_targetDspFlag')" />
      <t-column min-width="100" field="targetEqId" :title="$t('T9_targetEqId')" />
      <t-column min-width="150" field="targetTransferState" :title="$t('T9_targetTransferState')" />
      <t-column min-width="100" field="glassId" :title="$t('T9_glassId')" />
      <t-column min-width="100" field="chargeAction" :title="$t('T9_chargeAction')" />
      <t-column min-width="100" field="eventTime" :title="$t('T9_eventTime')" />
    </t-table>
    </div>
   </div>
   </div>
    <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
         <a-form-item :label="$t('T9_priority')" name="priority">
            <a-select class="t9-form-wideget-input-default" v-model:value="dataForm.priority"  @change="getEqpStatedesc" allow-clear :placeholder="$t('common_pleaseSelect')">
              <a-select-option v-for="item in priorityList"
              :key="item.machineState" :value="item.machineState" :prdesc="item.desc">
              {{item.machineState}}
              </a-select-option>
            </a-select>
          </a-form-item>
        <a-form-item :label="$t('T9_planState')" name="planState">
        <a-select
          v-model:value="dataForm.planState"
          allow-clear
          class="t9-form-wideget-input-default"
          :placeholder="$t('common_pleaseSelect')"
        >
          <a-select-option
            v-for="item in planStateList"
            :key="item.planState"
            :value="item.planState"
            >{{ item.planState }}</a-select-option
          >
        </a-select>
      </a-form-item>
          <a-form-item :label="$t('T9_comment')" name="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" :rows="1" :title="dataForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button  class="t9-form-wideget-btn-default" type="primary"  :loading="confirmBtnLoading" @click="handleConfirm">{{ $t('T9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import { shopIdList } from '@/views/options'
   import { downloadBlobFile } from '@/utils/download'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'ManageChangePlan',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        confirmBtnLoading: false,
        list: {
          planData: [],
          glassData: []
        },
        queryForm: {
          shopId: 'ARRAY',
          reservedEqId: undefined,
          planState: undefined,
          sourceCst: undefined,
          targetCst: undefined
        },
        dataForm: {
          priority: undefined,
          planState: undefined,
          eventComment: undefined,
          eventUser: undefined
        },
        options: {
          shopIdList
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules2: {
          eventComment: [
            { required: true, message: this.$t('valid_required'), trigger: 'blur' },
            { max: 500, message: this.$t('changePoint_maxLength', { n: 500 }), trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
    },
    created() {
    },
    methods: {
      handleSubDataClick({ row }) {
        this.eqpListRow = row
        this.eqpList.push(row)
        const params = {
          dtoName: 'MachineStateDTO',
          version: '80002',
          queryId: 'GetMachineStateInfo',
          eqpId: row.eqpId,
          state: row.state,
          menuName: 'changeMachineState',
          usage: 'getMachineStateList'
        }
        api.getList(params).then(res => {
          this.neweqpStateList = res
        }).catch(error => {
          console.error(error)
        })
      },
      getReasonCode() {
        const data = {
          dtoName: 'ReasonCodeDTO',
          version: '80011',
          queryId: 'GetReasonCodeList',
          machineType: this.eqpListRow.eqpType,
          eqpType: this.eqpListRow.eqpType,
          newMachineState: this.newMachineState,
          reasonCodeGroup: this.newMachineState,
          reasonCodeType: '',
          shopId: this.queryForm.shopId,
          menuName: 'changeMachineState',
          usage: 'getReasonCodeList'
        }
        api.getList(data).then(res => {
          this.reasonCodeList = res
        }).catch(error => {
          console.error(error)
        })
      },
      getEqpStatedesc(val, o) {
        this.dataForm.eqpStateDsc = o.prdesc
         this.newMachineState = val
         this.getReasonCode()
         this.dataForm.reasonCode = ''
         this.dataForm.reasonCodeDsc = ''
      },
      getReasonCodeDesc(val, o) {
        this.dataForm.reasonCodeDsc = o.prdesc
      },
      handleCheckChange({ row }) {
        this.tableRow = row
        this.getEqpList(row)
      },
      handleAll(all) {
        this.eqpList = all.records
        console.log(all, 'all')
      },
      getExport() {
        if (!this.list.subEqpData.length) return
        const params = {
           dtoName: 'SubEqpListDTO',
          version: '80014',
          queryId: 'GetMachineList',
          eqpId: this.tableRow.eqpId,
          eqpType: '',
          reasonCodeGroup: this.tableRow.reasonCodeGroup,
          reasonCodeType: '',
          state: this.tableRow.state,
          menuName: 'changeMachineState',
          usage: 'exportSubEqpList',
          export: true
        }
        api.getList(params).then(res => {
           downloadBlobFile(res, 'subEqpList')
        })
      },
      getEqpList(row) {
        const params = {
          dtoName: 'SubEqpListDTO',
          version: '80014',
          queryId: 'GetMachineList',
          eqpId: row.eqpId,
          eqpType: '',
          reasonCodeGroup: row.reasonCodeGroup,
          reasonCodeType: '',
          state: row.state,
          menuName: 'changeMachineState',
          usage: 'getSubEqpList'
        }
        api.getList(params).then(res => {
          this.list.subEqpData = res.subEqpListDTOList
        }).catch(error => {
          console.error(error)
        })
      },
      handleConfirm() {
      },
      handleOk() {
        this.visible = false
        this.confirmBtnLoading = true
        this.dataForm.eventUser = this.$store.state.user.uid
        const Params = {
          menuName: 'changeMachineState',
          usage: 'confirm',
          eqpList: this.eqpList,
          language: 'English',
          lineName: this.eqpListRow.eqpId,
          state: this.dataForm.neweqpState,
          reasonCodeType: '',
          telephone: ''
        }
        api
          .confirm({ ...this.dataForm, ...Params })
          .then(() => {
            this.confirmBtnLoading = false
            this.eqpList = []
            this.getEqpList(this.tableRow)
          })
          .catch((error) => {
            this.confirmBtnLoading = false
            console.error(error)
          })
      },
      exportExl() {},
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            const params = { ...this.queryForm }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res.mainMachineListDTOList || []
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang="less" scoped>
</style>
